﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/comm/mytags.jsp" %>
<!DOCTYPE>
<html lang="en" class="no-js">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<meta name="format-detection" content="telephone=no"/>
	<script type="text/javascript" src="${ctx}/static/js/jquery-1.8.3.js"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Cache-Control" content="no-cache" />
	<meta name="MobileOptimized" content="320"/>
<title>活动开始了</title>
    <link href="${ctx}/static/wxcss/wap.css" rel="stylesheet" type="text/css">
    <link href="${ctx}/static/wxcss/bplayer.css" rel="stylesheet" type="text/css" />
<style>
.wap-tab li {
    float: left;
    width: 50%;
}
</style>

<input id="wx-share-title" type="hidden" value="活动开始了" />
<input id="wx-share-desc" type="hidden" value="" />

	<script src="${ctx}/static/js/jweixin-1.0.0.js" type="text/javascript"></script>
	<script src="${ctx}/static/js/newfxjs.js" type="text/javascript"></script>
<style>
dl.wap-list-1 dd li:first-child {
    margin-right: 0;
    width: 20%;
}

dl.wap-list-1 dd li:last-child {
    width: 80%;
}
.pages {
	text-align: center;
	padding-bottom: 20px;
	margin: 10px;
}
</style>

</head>

<script type="text/javascript">
    function dui(id,c) {
        $.ajax({
            url:"${ctx}/duijiang",
            type:"post",
            dataType:"json",
            data:{
                id:id
            },
            success:function(res){
                if(res.code === 0){
                    alert("兑奖成功！");
                    $("#" + id).html(parseInt($("#" + id).html()) -1);
                    $("#credits").html(parseInt($("#credits").html() - c));
                }
                else{
                    alert(res.msg);
                }
            }
        })
    }
</script>

<body>
<div id="parent">
<div id="scroll">
<section>
    <div class="user">
            <ul class="user-tab wap-tab clear">
			<li class="on"><a href="#">您有
                <c:if test="${user.credits==null}">
                   <span id="credits"> 0</span>
                </c:if>
                <c:if test="${user.credits!=null}">
                    <span id="credits">${user.credits}</span>
                </c:if>
                积分</a></li>
			<li><a href="#">物品：${list.size()}件</a></li>
			</ul>
            <div class="use-con wap-con">
                    <dl class="wap-list-3">
                        <c:forEach items="${list}" var="prize">
                        <dd>
                             <ul class="clear">
                                    <li></li>
                                    <li style="display: flex;justify-content: space-between">
                                        <div style="display: flex; font-size: 1.5rem;color: #fff; flex-direction: column;justify-content: space-around; ">
                                            <div>奖品名称：${prize.prizeName}</div>
                                            <div>剩余数量：<em id="${prize.prizeId}">${prize.prizeCount}</em></div>
                                            <div>奖品总数：${prize.prizeTotalCount}</div>
                                            <div>所需积分：${prize.credits}</div>
                                        </div>
                                        <div>
                                            <img src="${prize.prizeImg}" alt="" style="width: 100px; height: 100px;"/>
                                            <button onclick="dui(${prize.prizeId},${prize.credits});" class="button red">兑奖</button>
                                        </div>
                                    </li>
                             </ul>
                        </dd>
                        </c:forEach>
                    </dl>
            </div>
			<STYLE>
                .button{
                    width: 5rem;
                    line-height: 38px;
                    text-align: center;
                    font-weight: bold;
                    color: #fff;
                    text-shadow:1px 1px 1px #333;
                    border-radius: 5px;
                    margin-left: 0.5rem;
                    position: relative;
                    overflow: hidden;
                }
                .button.red{
                    border:1px solid #b42323;
                    box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;
                    background: -webkit-linear-gradient(top,#d53939,#b92929);
                    background: -moz-linear-gradient(top,#d53939,#b92929);
                    background: linear-gradient(top,#d53939,#b92929);
                }
			.copyright {
				color: #666;
				font-size: 14px;
				padding: 8px;
				text-align: center;
			}

			.copyright a {
				color: #666;
			}
			</STYLE>
			<div class="copyright">
			<a class="" href=""></a>
			</div><br><br>
            
    </div>
</section>
<section style="padding-bottom:30px;"></section>

    <script language="javascript" src="${ctx}/static/js/jquery.lazyload.js"></script>
    <script language="javascript">
        //    jQuery(function() {
        //        jQuery("img").lazyload({
        //            event : "scroll",
        //            effect : "fadeIn",
        //            threshold : 300,
        //            placeholder : "http://cdntest.weixiaoxin.com/Public/bobing/load.gif"
        //        });
        //    });
    </script>

    <footer><p></p>
        <div class="footer-nav">
            <a class="footer-nav-plus on" href="javascript:void(0)"></a>
            <dl class="hide" style="display:none;">
                <dd><a href="${ctx}/wxIndex">返回首页</a></dd>
                <dd><a href="${ctx}/wxPrizeList">积分兑换</a></dd>
                <dd><a href="${ctx}/wxUserPrize">兑换记录</a></dd>
            </dl>
        </div>
    </footer>

<script language="javascript">
jQuery(function(){
	jQuery('.footer-bg').click(function(){
		if(jQuery('.footer-nav .off').length){
			jQuery('.footer-nav .footer-nav-plus').removeClass('off');
			jQuery('.footer-bg').hide();
			jQuery('.footer-nav dl').animate({opacity: "0"}, 100, "linear");
		}
	});
	jQuery('.footer-nav .footer-nav-plus').click(function(){
		if(jQuery('.footer-nav .off').length==0){
			jQuery('.footer-nav .footer-nav-plus').addClass('off');
			jQuery('.footer-bg').show();
			jQuery('.footer-nav dl').show().animate({opacity: "1"}, 100, "linear");
		}else{
			jQuery('.footer-nav .footer-nav-plus').removeClass('off');
			jQuery('.footer-bg').hide();
			jQuery('.footer-nav dl').animate({opacity: "0"}, 100, "linear").hide();
		}
	});
	jQuery('.footer-ad-close').click(function(){
		jQuery(this).parent('.footer-ad').hide();
	});
});
</script>

<div style="display:none">
    <img src="${ctx}/static/picture/hm.gif" width="0" height="0" />
</div>
<p class="footerwebmzsm"></p>
</body>
</html>